<template>
  <header class="header">
    
    <div class="header-main">
      <div class="container">
        <div class="logo">
          <img src="/images/logo.svg" alt="海康威视" @error="handleLogoError">
          <span class="logo-text">海康威视</span>
        </div>
        
                 <nav class="nav">
           <ul class="nav-list">
             <li class="nav-item" v-for="item in navItems" :key="item.path">
               <router-link 
                 :to="item.path" 
                 class="nav-link"
                 :class="{ 'active': isActive(item.path) }"
                 active-class=""
               >
                 {{ $t(item.nameKey) }}
               </router-link>
             </li>
           </ul>
         </nav>
         
         <!-- 语言切换 -->
         <div class="language-switcher">
           <el-dropdown @command="handleLanguageChange" trigger="click">
             <span class="language-trigger">
               <i class="el-icon-globe"></i>
               {{ currentLanguageText }}
               <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="zh-CN">
                 <span class="flag">🇨🇳</span>
                 中文
               </el-dropdown-item>
               <el-dropdown-item command="en-US">
                 <span class="flag">🇺🇸</span>
                 English
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
        
        <!-- <div class="header-actions">
          <div class="search-box">
            <el-input
              placeholder="搜索产品、解决方案..."
              v-model="searchKeyword"
              size="small"
              prefix-icon="el-icon-search"
              @keyup.enter.native="handleSearch"
            >
            </el-input>
          </div>
          <el-button type="primary" size="small" @click="handleContact">联系我们</el-button>
        </div> -->
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
     data() {
     return {
       searchKeyword: '',
       navItems: [
         { nameKey: 'nav.home', path: '/' },
         { nameKey: 'nav.products', path: '/products' },
         { nameKey: 'nav.news', path: '/news' },
         { nameKey: 'nav.about', path: '/about' }
       ]
     }
   },
   computed: {
     currentLanguageText() {
       return this.$i18n.locale === 'zh-CN' ? '中文' : 'English'
     }
   },
     methods: {
     handleSearch() {
       if (this.searchKeyword.trim()) {
         this.$message.info(`搜索: ${this.searchKeyword}`)
       }
     },
     handleContact() {
       this.$message.info('联系我们功能开发中...')
     },
     handleLogoError(e) {
       e.target.style.display = 'none'
     },
           isActive(path) {
        // 首页路径特殊处理，只有完全匹配时才激活
        if (path === '/') {
          return this.$route.path === '/'
        }
        // 其他路径使用startsWith匹配
        return this.$route.path.startsWith(path)
      },
      handleLanguageChange(locale) {
        this.$i18n.locale = locale
        localStorage.setItem('locale', locale)
        this.$message.success(this.$i18n.locale === 'zh-CN' ? '语言已切换为中文' : 'Language switched to English')
      }
   }
}
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-top {
  background: #f8f9fa;
  padding: 8px 0;
  font-size: 12px;
  color: #666;
  
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-top-left {
    .divider {
      margin: 0 10px;
      color: #ddd;
    }
  }
  
  .header-top-right {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .login-btn {
      color: #409eff;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
    
    .language-selector {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      
      &:hover {
        color: #409eff;
      }
    }
  }
}

.header-main {
  padding: 20px 0;
  
  .container {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    
    img {
      height: 40px;
      width: auto;
    }
    
    .logo-text {
      font-size: 24px;
      font-weight: bold;
      color: #2c3e50;
    }
  }
  
  .nav {
    flex: 1;
    
    .nav-list {
      display: flex;
      list-style: none;
      gap: 30px;
      
      .nav-item {
        .nav-link {
          text-decoration: none;
          color: #2c3e50;
          font-size: 16px;
          font-weight: 500;
          padding: 10px 0;
          position: relative;
          
          &:hover {
            color: #409eff;
          }
          
                     &.active {
             color: #409eff;
             
             &::after {
               content: '';
               position: absolute;
               bottom: 0;
               left: 0;
               right: 0;
               height: 2px;
               background: #409eff;
             }
           }
        }
      }
    }
  }
  
     .header-actions {
     display: flex;
     align-items: center;
     gap: 15px;
     
     .search-box {
       width: 250px;
     }
   }
   
   .language-switcher {
     margin-left: 20px;
     
     .language-trigger {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 12px;
       border: 1px solid #e4e7ed;
       border-radius: 4px;
       cursor: pointer;
       color: #606266;
       font-size: 14px;
       transition: all 0.3s;
       
       &:hover {
         border-color: #409eff;
         color: #409eff;
       }
       
       .el-icon-globe {
         font-size: 16px;
       }
     }
     
     .el-dropdown-menu {
       .el-dropdown-item {
         display: flex;
         align-items: center;
         gap: 8px;
         
         .flag {
           font-size: 16px;
         }
       }
     }
   }
}

@media (max-width: 768px) {
  .header-main {
    .container {
      flex-direction: column;
      gap: 20px;
    }
    
    .nav {
      .nav-list {
        gap: 15px;
      }
    }
    
    .header-actions {
      flex-direction: column;
      gap: 10px;
      
      .search-box {
        width: 100%;
      }
    }
    
    .language-switcher {
      margin-left: 0;
      margin-top: 10px;
      
      .language-trigger {
        justify-content: center;
        width: 100%;
      }
    }
  }
}
</style>

